@model SF.Module.Backend.ViewModels.HomeViewModel

@{
    ViewData["Title"] = "开发框架在线演示";
    Layout = "~/Views/Shared/_Index.cshtml";
}
<link href="~/lib/editormd/css/editormd.css" rel="stylesheet" />
<link rel="stylesheet" href="~/lib/editormd/css/editormd.preview.css" /> <script src="~/lib/editormd/lib/marked.min.js"></script>
        <script src="~/lib/editormd/lib/prettify.min.js"></script>    <script src="~/lib/editormd/lib/raphael.min.js"></script>
        <script src="~/lib/editormd/lib/underscore.min.js"></script>
        <script src="~/lib/editormd/lib/sequence-diagram.min.js"></script>
        <script src="~/lib/editormd/lib/flowchart.min.js"></script>
        <script src="~/lib/editormd/lib/jquery.flowchart.min.js"></script>
<script type="text/javascript" charset="utf-8" src="~/lib/editormd/editormd.js"> </script>
 <style>
             
            #test-editormd-view, #test-editormd-view2 {
                padding-left: 0;
                padding-right: 430px;
                margin: 0;
            }
        </style>
<section id="page-title">
    <h1 class="title">
        <div class="page-icon">
            <i class="fa fa-exchange"></i>
        </div>
        控制台
    </h1>
</section>

<section id="page-content">
    <div class="row">
        <div class="col-md-12">
            <div class="editor-area">
                <div>
                    <h2>写新文章</h2>
                    <div id="test-editormd">
                        <textarea style="display:none;">
#### Settings
```javascript
{
imageUpload    : false,
imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "./php/upload.php",

}
```
![](/upload/image/20161209/6361688150497418245660056.jpg)
#### JSON data
```json
{
success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
message : "提示的信息，上传成功或上传失败及错误信息等。",
url     : "图片地址"        // 上传成功时才返回
}
````
#### Get value

每个 Editor.md 的 ID 元素下都有一个保存 Markdown 源码的 Textarea，你也可以通过设置开启另一个保存 HTML 源码的 Textarea，可以按需要获取相应的值，如下：


#### Example

```javascript
var testEditor = editormd("test-editormd", {
    width  : "90%",
    height : 640,
    path   : "../lib/",
    saveHTMLToTextarea : true
});

testEditor.getMarkdown();       // 获取 Markdown 源码
testEditor.getHTML();           // 获取 Textarea 保存的 HTML 源码
testEditor.getPreviewedHTML();  // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用
```
                        </textarea>
                    </div>

                </div>
                  <input id="save" type="button" name="submit" value="提交表单" style="padding: 5px;" /> 

            </div>
        </div>
    </div>
   <div class="row" >
       <div class="col-md-12">
            <div id="test-editormd-view">
               <textarea id="append-test" style="display:none;" >          
#### Settings
```javascript
{
imageUpload    : false,
imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "./php/upload.php",

}
```
               </textarea>               
            </div>
       </div>
   </div>
</section>

<script type="text/javascript">
    $(function () {
        var testEditor = editormd("test-editormd", {
            width: "90%",
            height: 640,
            markdown: "",
            path: '/lib/editormd/lib/',
            //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为 true
            //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为 true
            //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为 true
            //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为 0.1
            //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为 #fff
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/api/common/emdupload",

            /*
             上传的后台只需要返回一个 JSON 数据，结构如下：
             {
                success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
                message : "提示的信息，上传成功或上传失败及错误信息等。",
                url     : "图片地址"        // 上传成功时才返回
             }
             */
        });
        $("#save").click(function () {
          alert( testEditor.getMarkdown());

        });
     
        var testEditormdView = editormd.markdownToHTML("test-editormd-view", {
                        markdown        : $("#append-test").text() ,//+ "\r\n" + $("#append-test").text(),
                        //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                        htmlDecode      : "style,script,iframe",  // you can filter tags decode
                        //toc             : false,
                        //tocm            : true,    // Using [TOCM]
                        //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
                        //gfm             : false,
                        //tocDropdown     : true,
                        // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                        emoji           : true,
                        taskList        : true,
                        tex             : true,  // 默认不解析
                        flowChart       : true,  // 默认不解析
                        sequenceDiagram : true,  // 默认不解析
                    });
    });


</script>